<template>
	<view>
		<page-head headTitle="导游简介" :news="true" :pictureStyle="false" :returnButton="true" @clickLeftReturn="clickLeftReturn" @onClickWords="onClickWords"></page-head>
		<view class="m-t9">
			<view>
				<view class="pic-bj"></view>
				<view class="flex justify-content brief-mt mr-6 m-r6">
					<view class="bg-white p-l-r width border-r2 box-shadowr">
						<view class="flex justify-between p-t-b4 border-botton">
							<view class="flex align-center">
								<image class="guide-pic border-r-1" src="/static/images/picture.png"></image>
								<view class="flex-1 p-l3">
									<view class="flex align-center">
										<text class="fs-3 mr m-b1">李师傅</text>
										<image class="gender-pic " src="/static/images/gender.png" style="margin-top: -14rpx;"></image>
									</view>
									<view class="fs-24 flex align-center">
										<text><text class="color-table">服务</text><text class="color-red p-l1">729</text>次</text>
										<text class="divid-line"></text>
										<text><text class="color-table">评论</text><text class="color-red p-l1">729</text>次</text>
									</view>
								</view>
							</view>
						</view>
						<view class="flex justify-between p-t-3 p-b2">
							<view class="flex align-center">
								<uni-rate disabled="true" value="5" size="16"></uni-rate>
								<text class="fs-24 ml-2">5.0分</text>
							</view>
							<image class="certified-pic" src="/static/images/certified.png"></image>
						</view>
					</view>
				</view>	
			</view>
			<view class="p-l-r3 m-t-3">
				<view class="flex height align-center fs-g">
					<view class="flex-1 flex  order-bj orde-r fs-g">
						<text class="order-text">TA的相册</text>
					</view>
				</view>
				<view >
				<scroll-view scroll-x="true" class="scroll flex">
					<view class="scroll-view-item_H album m-r1 p-b5">
						<image src="/static/images/gict.png"></image>
					</view>
					<view class="scroll-view-item_H album m-r1 p-b5">
						<image src="/static/images/gict.png"></image>
					</view>
					<view class="scroll-view-item_H album m-r1 p-b5">
						<image src="/static/images/gict.png"></image>
					</view>
					<view class="scroll-view-item_H album m-r1 p-b5">
						<image src="/static/images/gict.png"></image>
					</view>
					<view class="scroll-view-item_H album m-r1 p-b5">
						<image src="/static/images/gict.png"></image>
					</view>
				</scroll-view>	
				</view>
			</view>
			<border></border>
			<view class="p-l-r3">
				<view class="flex align-center m-t6 fs-g m-b2">
					<view class="flex-1 flex  order-bj orde-r fs-g">
						<text class="order-text">基本信息</text>
					</view>
				</view>
				<view>
					<view class="flex align-center search-h border-botton">
						<view class="width5">
							<text class="color-table">姓名：</text><text>雷师傅</text>
						</view>
						<view class="width5">
							<text class="color-table">性别：</text><text>男</text>
						</view>
					</view>
					<view class="flex align-center search-h border-botton">
						<view class="width5">
							<text class="color-table">语言：</text><text>汉语 粤语 英语</text>
						</view>
						<view class="width5">
							<text class="color-table">年代：</text><text>9</text>
						</view>
					</view>
					<view class="flex align-center search-h border-botton">
						<view class="width5">
							<text class="color-table">服务城市：</text><text>南宁 梧州</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<bright-button title="立即预约" class="m-t-b"></bright-button>
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
import uniRate from '@/components/uni-ui/uni-rate/uni-rate.vue'
import brightButton from '@/components/common/bright-button.vue'
import border from '@/components/common/border.vue'
	export default {
		components:{
			pageHead,
			uniRate,
			brightButton,
			border
		},
		data() {
			return {
				old: {
						scrollTop: 0
					}
			}
		},
		methods: {
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			clickLeftReturn(){
				uni.navigateBack({
				    delta: 1
				});
			},
			onClickWords(){
				
			}
		}
	}
</script>

<style>
page{background-color: #FFFFFF;}
.brief-mt{margin-top: -160rpx;}
.guide-pic{width: 120rpx;height: 120rpx;}
.gender-pic{width: 23rpx;height: 36rpx;}
.news-pic{width: 43rpx;height: 42rpx;}
.divid-line{margin: 0 40rpx;width: 2rpx;border-left: 2rpx solid #666666;display: inline-block; height: 24rpx;line-height: 1 !important;}
.certified-pic{width:110rpx;height: 42rpx;}
.album{width: 178rpx;height: 178rpx;display: inline-block;}
.album image{width: 178rpx;height: 178rpx;}
.scroll {width: 100%;overflow: hidden;white-space: nowrap;}
</style>
